<template>
    <div>
        <!-- 搜索框 -->
        <van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
        <!-- 下拉菜单 -->
        <Mydropmenu :filterCategory="filterCategory" @changePriceFn1="getPriceFn" @changeCategoryFn1='getCategoryFn'>
        </Mydropmenu>
        <!-- 产品列表组件 -->
        <Goodslist :goodslist="goodslist"></Goodslist>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 引入下拉菜单组件
import Mydropmenu from '@/components/Mydropmenu.vue'
// 导入搜索商品接口
import { getsearchdata } from '@/api/searchpopup'
// 导入分类类别数据类型
import type { IfilterCategoryitem } from '@/types/searchpopup'
// 导入产品列表组件
import Goodslist from '@/components/Goodslist.vue'
const keyword = ref('') // 搜索的关键字
const filterCategory = ref<Array<IfilterCategoryitem>>([]); // 定义的分类类别数组
const goodslist = ref([]) // 产品列表数组

//点击搜索事件
const onSearch = () => {
    console.log('点击搜索');
    // 点击搜索触发请求数据
    getsearchdatalist()
}
// 点击取消
const router = useRouter();
const onCancel = function () {
    router.go(-1)
}

// 搜索商品接口数据请求
const order = ref('desc') // 定义价格排序方式 默认 降序 desc
const categoryId = ref('0') // 定义分类的类别 默认 全部 0
const sort = ref('id') // 定义排序的方式 默认 id

const getsearchdatalist = () => {
    getsearchdata({
        keyword: keyword.value,
        page: 1,
        size: 20,
        order: order.value, // 默认是降序
        categoryId: categoryId.value,  // 0 表示全部商品
        sort: sort.value
    }).then(res => {
        console.log('res', res);
        // vant组件库中要求的字段 [{text:'',value:''}] 但是返回的是 [{name:'',id:'',checked:}]
        const newfilterCategory = res.data.data.filterCategory.map((item: any) => {
            return { text: item.name, value: item.id, checked: item.checked }
        })
        // 给分类类别数组赋值
        filterCategory.value = newfilterCategory
        console.log(' filterCategory.value', filterCategory.value);

        // 给产品列表赋值
        goodslist.value = res.data.data.goodsList
    })

}

// 初始化调用执行
getsearchdatalist()

// 点击价格排序触发的事件
const getPriceFn = (data: string) => {
    console.log('data1', data);
    // 修改价格排序的方式
    order.value = data
    // 修改排序的方式
    sort.value = 'price'
    // 重新请求数据
    getsearchdatalist()
}
// 点击类别触发的事件
const getCategoryFn = (data: number) => {
    console.log('data2', data);
    // 修改类别
    categoryId.value = String(data)
    // 修改排序的方式
    sort.value = 'id'
    // 重新请求数据
    getsearchdatalist()

}
</script>
<style scoped></style>